<!--&lt;!&ndash; 使用EL表达式(${app_path})查出项目路径 &ndash;&gt;-->
<!--&lt;!&ndash; jquery 核心 JavaScript 文件 &ndash;&gt;-->
<!--<script src="${app_path}/static/js/jquery-3.5.1.min.js"></script>-->
<!--&lt;!&ndash; Bootstrap 核心 CSS 文件 &ndash;&gt;-->
<!--<link rel="stylesheet" href="${app_path}/static/bootstrap-3.3.7-dist/css/bootstrap.min.css">-->
<!--&lt;!&ndash; Bootstrap 核心 JavaScript 文件 &ndash;&gt;-->
<!--<script src="${app_path}/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>-->
<!--&lt;!&ndash; Bootstrap alert 扩展 JavaScript 文件 &ndash;&gt;-->
<!--<script src="${app_path}/static/bootstrap-alert-extend/bootstrap-alert-extend.js"></script>-->
<!--&lt;!&ndash; Bootstrap-select 核心 CSS 文件 &ndash;&gt;-->
<!--<link rel="stylesheet" href="${app_path}/static/bootstrap-select-1.13.9/dist/css/bootstrap-select.min.css">-->
<!--&lt;!&ndash; Bootstrap-select 核心 JS 文件 &ndash;&gt;-->
<!--<script src="${app_path}/static/bootstrap-select-1.13.9/js/bootstrap-select.js"></script>-->

<!-- 该模态框用于增加角色 -->
<div class="modal fade" id="add_role_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <!-- 模态框标题 -->
                <h4 class="modal-title">角色添加</h4>
            </div>
            <div class="modal-body">
                <form id="add_role_form" class="form-horizontal">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">角色名</label>
                        <div class="col-sm-10">
                            <!-- placeholder是显示输入提示的属性 -->
                            <!-- name属性的值与实体类的属性名相同是为了能自动进行类对象的实例化 -->
                            <input type="text" name="role_name" class="form-control" id="rolename_add_input"
                                   placeholder="角色名(3-10位)">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">简介</label>
                        <div class="col-sm-10">
                            <input type="text" name="brief" class="form-control" id="brief_add_input" placeholder="简介">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">拥有权限</label>
                        <div class="col-sm-10">
                            <select id="resource_add_select"
                                    class="selectpicker show-tick form-control" multiple data-live-search="false"
                                    title="还没选中任何权限">
                            </select>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" id="add_role_btn" class="btn btn-primary">确认</button>
            </div>
        </div>
    </div>
</div>

<!-- 该模态框用于修改角色 -->
<div class="modal fade" id="update_role_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <!-- 模态框标题 -->
                <h4 class="modal-title" id="myModalLabel">角色修改</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">ID</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="id_update_input" disabled>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">角色名</label>
                        <div class="col-sm-10">
                            <!-- placeholder是显示输入提示的属性 -->
                            <!-- name属性的值与实体类的属性名相同是为了能自动进行类对象的实例化 -->
                            <input type="text" class="form-control" id="rolename_update_input"
                                   placeholder="用户名(3-10位)" disabled>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">简介</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="brief_update_input"
                                   placeholder="简介">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">拥有权限</label>
                        <div class="col-sm-10">
                            <select id="resource_update_select"
                                    class="selectpicker show-tick form-control" multiple data-live-search="false"
                                    title="没有选中任何权限">
                            </select>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" id="update_role_btn" class="btn btn-primary">确认</button>
            </div>
        </div>
    </div>
</div>

<!-- 该模态框用于删除角色 -->
<div class="modal fade" id="delete_role_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <!-- 模态框标题 -->
                <h4 class="modal-title">删除角色</h4>
            </div>
            <div class="modal-body">
                <p id="delete_tip_p">模态框内容</p>
                <p id="delete_id_p" style="visibility: hidden"></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" id="delete_role_btn" class="btn btn-danger">确认</button>
            </div>
        </div>
    </div>
</div>

<div class="col-sm-10">

    <div class="page-header" style="margin-top: 10px;
    margin-bottom: 5px;
    background-color: #fff;
    border-radius: 4px;
    border: 1px solid #ddd;
    padding: 15px;">
        <h2 style="margin: 0px">权限管理 / 角色管理</h2>
    </div>


    <!--用户处理框-->
    <div class="panel panel-default">
        <div class="panel-body">

            <!--搜索栏-->
            <div class="navbar-collapse" id="bs-example-navbar-collapse-1">
                <nav class="navbar navbar-default">
                    <div class="container-fluid">
                        <div class="navbar-header" style="width: 98%;">
                            <form class="navbar-form navbar-left" style="width: 98%;">
                                <div class="form-group" style="float: right;">
                                    <!--添加按钮-->
                                    <button type="button" class="btn btn-success" id="show_add_modal">添加角色</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </nav>
            </div>

            <!--表格-->
<!--            用于显示角色权限的表格-->
            <table id="role_curd_table" class="table table-hover table-bordered table-striped">
                <caption></caption>
                <thead>
                <tr>
                    <th>id</th>
                    <th>角色名称</th>
                    <th>拥有权限</th>
                    <th>简介</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>

                </tbody>
            </table>
        </div>
<!--        该行用于显示分页信息-->
        <div class="row">
<!--            该列用于显示页数信息-->
            <div id="page_info" class="col-md-4 text-center">
                <p>当前页:&nbsp;&nbsp;页显示量:&nbsp;&nbsp;总页数:&nbsp;&nbsp;总数据量:</p>
            </div>
<!--            该列用于显示分页导航条-->
            <div class="col-md-offset-2 col-md-6">
                <nav aria-label="Page navigation">
                    <ul id="page_nav" class="pager">
                    </ul>
                </nav>
            </div>
        </div>

    </div>
</div>


<script type="text/javascript">

    //加载页面后进行的操作
    $(function () {
        startWaiting();
        //发送跳转请求到用户表第1页
        to_page(1);
        //绑定按钮点击事件
        bindOnEvent();
        checkIsFinish();
    });

    /**
     * 该方法用于开始等待页面数据填充
     */
    function startWaiting(){
        //弹出等待模态框
        $('#wait_modal').modal({
            show: true,
            backdrop: 'static'
        });
    }

    /**
     * 该方法用于循环等待并判断是否已结束了页面加载，若是则结束，若否则继续等待
     */
    function checkIsFinish(){
        let intervalID = setInterval(function () {
            console.log("持续等待页面加载...");
            let to_page_finish = (sessionStorage.getItem("to_page_finish") === "true");
            let bindOnEvent_finish = (sessionStorage.getItem("bindOnEvent_finish") === "true");
            if (to_page_finish&&bindOnEvent_finish){//如果可以结束，则结束
                console.log("页面加载完成!");
                sessionStorage.removeItem("to_page_finish");
                sessionStorage.removeItem("bindOnEvent_finish");
                //关闭等待模态框
                $('#wait_modal').modal('hide');
                clearInterval(intervalID);//结束循环
            }
        },200);
    }

    //该方法用于跳转到页面并查询
    function to_page(pn) {
        sessionStorage.setItem("to_page_finish","false");
        //将当前页数存入sessionStorage
        sessionStorage.setItem("pageNum", pn);
        $.ajax({
            url: roleInterface,//非Rest
            data: "pn=" + pn,
            type: "GET",
            beforeSend: function(XMLHttpRequest ) {
                //在请求头部设置accessToken
                XMLHttpRequest.setRequestHeader("accessToken", sessionStorage.getItem("accessToken"));
            },
            //请求成功后的回调函数
            //result是请求成功后返回的Json结果
            success: function (result) {
                // 构建用户表
                build_user_table(result);
                // 构建构建页数信息条
                build_page_info(result);
                // 构建分页导航条
                build_role_nav(result);
            },complete: function () {
                sessionStorage.setItem("to_page_finish","true");
            }
        });
    }

    //该方法用于构建用户数据表
    function build_user_table(result) {
        let $roleTable = $("#role_curd_table tbody");
        $roleTable.empty();//添加前需要先清空

        let roleList = result.dataMap.pageInfo.list;//用户的信息表
        let tableSize = result.dataMap.pageInfo.pageSize;//数据表每行的数量
        let createNums = 0;//当前已创建数据行的数量

        let resourceList;//资源列表

        $.ajax({//请求全部资源
            url: getAllResourceInterface,
            type: "GET",
            beforeSend: function(XMLHttpRequest ) {
                //在请求头部设置accessToken
                XMLHttpRequest.setRequestHeader("accessToken", sessionStorage.getItem("accessToken"));
            },
            async: false,//async设置为false可以使请求成为同步模式
            //请求成功后的回调函数
            //result是请求成功后返回的Json结果
            success: function (result) {
                resourceList = result.dataMap.resourceList;
            }
        });

        //Jquery里的$.each()遍历中，index代表当前遍历的索引，item代表当前遍历的数据
        $.each(roleList, function (index, item) {
            // showMsg = showMsg + index+":"+ item.id+":"+item.username+"\n";
            // let $checkbox = $("<input type='checkbox' class='user_check_item'/>");//创建选框
            // let $checkboxTd = $("<td></td>").append($checkbox);//创建选框格并加入选框
            let $roleIdTd = $("<td></td>").append(item.id);//创建id格并加入id数据
            let $roleNameTd = $("<td></td>").append(item.role_name);//创建角色名格并加入角色名数据
            let $resourceTd = $("<td></td>");//创建拥有角色格
            let nowResources = item.resourceList;//角色目前拥有的资源
            let roleResourceIdList = [];
            $.each(nowResources, function (index, item) {
                roleResourceIdList.push(item.id);
            });

            let $resourceSelect = $("<select></select>")
                .addClass("selectpicker show-tick row-select")
                .attr("multiple","")
                .attr("title","未拥有任何权限")
                .attr("data-selected-text-format","count > 4")//最多显示4个资源
                .attr("data-count-selected-text","拥有{0}个权限(点击查看详情)")
                .attr("data-live-search","false");

            $.each(resourceList, function (index, item) {
                let $resourceOp = $("<option></option>")
                    .addClass("resource_option")//加入一个识别用的框
                    .append(item.resource_name)
                    .attr("disabled","")//禁用选中
                    .attr("value", item.id);//创建选项框
                $resourceSelect.append($resourceOp);//加入选项框
            });
            $resourceSelect.val(roleResourceIdList);//给修改模态框进行默认勾选
            let $resourceSelectTd = $("<td></td>").append($resourceSelect);//创建下拉框并加入权限数据
            let $briefTd = $("<td></td>").append(item.brief);//创建简介格并加入简介数据
            // let $emailTd = $("<td></td>").append(item.email);//创建邮箱格并加入邮箱数据
            let $updateBtn = $("<button class=\"btn btn-primary btn-sm update_role_btn\">修改</button>");
            // $updateBtn.click(function () {//给修改按钮设置点击事件
            //     $("#update_role_modal").modal({//弹出模态框
            //         backdrop: "static"
            //     });
            // });
            let $deleteBtn = $("<button class=\"btn btn-danger btn-sm delete_role_btn\" style='margin-left: 10px;'>删除</button>");
            let $operationTd = $("<td></td>").append($updateBtn).append($deleteBtn);//创建操作格并加入操作按钮

            let $userTr = $("<tr></tr>")//创建用户数据行并加入各种数据格子
                .append($roleIdTd)
                .append($roleNameTd)
                .append($resourceSelectTd)
                .append($briefTd)
                .append($operationTd);

            $roleTable.append($userTr);//将数据行加入表格中
            createNums++;//已创建数据行的数量加1
        });

        //构造空数据行
        for (let i = createNums; i < tableSize; i++) {
            let $userTr = $("<tr></tr>");//创建用户数据行并加入各种数据格子
            for (let j = 0; j < 5; j++) {
                let $nullTd = $("<td>&nbsp;</td>");//创建选框
                $userTr.append($nullTd);//加入选框
            }
            $roleTable.append($userTr);//将数据行加入表格中
        }

        //初始化每一行的selectpicker
        $(".row-select").selectpicker({
            'selectedText': 'cat',
            width: 350//给它设定初始宽度
        });
        //不刷新则无法显示
        $(".row-select").selectpicker('refresh');
        $(".row-select").selectpicker('render');

        //下面为构建增加模态框里的下拉选框
        let $resourceAddSl = $("#resource_add_select");
        $resourceAddSl.empty();//构建前先清空
        //设置selectpicker(bootstrap-select)的selectpicker的属性
        $resourceAddSl.selectpicker({
            'selectedText': 'cat'
        });
        $.each(resourceList, function (index, item) {
            //示例 <option value="0">苹果</option>
            let $resourceOp = $("<option></option>").append(item.resource_name).attr("value", item.id);//创建选项框
            $resourceAddSl.append($resourceOp);//加入选项框
        });
        //不刷新则无法显示
        $resourceAddSl.selectpicker('refresh');
        $resourceAddSl.selectpicker('render');

        //下面为构建修改模态框里的下拉选框
        let $resourceUpdateSl = $("#resource_update_select");
        $resourceUpdateSl.empty();//构建前先清空
        //设置selectpicker(bootstrap-select)的selectpicker的属性
        $resourceUpdateSl.selectpicker({
            'selectedText': 'cat'
        });
        $.each(resourceList, function (index, item) {
            let $resourceOp = $("<option></option>").append(item.resource_name).attr("value", item.id);//创建选项框
            $resourceUpdateSl.append($resourceOp);//加入选项框
        });
        //不刷新则无法显示
        $resourceUpdateSl.selectpicker('refresh');
        $resourceUpdateSl.selectpicker('render');
    }


    //该方法用于构建页数信息条
    function build_page_info(result) {
        let $pageInfo = $("#page_info");
        $pageInfo.empty();//先清空"页数信息条"里的信息

        let pageNum = result.dataMap.pageInfo.pageNum;//当前页码
        let pageSize = result.dataMap.pageInfo.pageSize;//页容量
        let pages = result.dataMap.pageInfo.pages;//总页数
        let total = result.dataMap.pageInfo.total;//总数据量
        //totalRecords = total;

        let $pageInfoP = $("<span></span>").append(
            "当前页:" + pageNum + "&nbsp;&nbsp;" +
            "页显示量:" + pageSize + "&nbsp;&nbsp;" +
            "总页数:" + pages + "&nbsp;&nbsp;" +
            "总数据量:" + total);

        $pageInfo.append($pageInfoP);//再往"页数信息条"里添加信息
    }


    //该方法用于构建分页导航条
    function build_role_nav(result) {
        let $navUl = $("#page_nav");//找到需要被添加的导航栏对象
        $navUl.empty();//添加前需要先清空

        let pageNum = result.dataMap.pageInfo.pageNum;//当前页码
        let pageSize = result.dataMap.pageInfo.pageSize;//页容量
        let pages = result.dataMap.pageInfo.pages;//总页数
        let total = result.dataMap.pageInfo.total;//总数据量
        let isFirstPage = result.dataMap.pageInfo.isFirstPage;//是否是首页的标识
        let isLastPage = result.dataMap.pageInfo.isLastPage;//是否是尾页的标识
        let navigatepageNums = result.dataMap.pageInfo.navigatepageNums;//导航栏要显示的数字们

        sessionStorage.setItem("nowPage",pageNum);//设置当前页数
        sessionStorage.setItem("totalRecords",total);//设置总记录数

        let $firstPageLi = $("<li></li>").append(
            $("<a></a>").append("首页").attr("href", "#")
        );
        let $prePageLi =
            $("<li></li>").append(
                $("<a></a>").append(
                    $("<span></span>").append("&laquo;")
                ).attr("href", "#")
            );

        let $nextPageLi =
            $("<li></li>").append(
                $("<a></a>").append(
                    $("<span></span>").append("&raquo;")
                ).attr("href", "#")
            );
        let $lastPageLi = $("<li></li>").append(
            $("<a></a>").append("尾页").attr("href", "#")
        );

        //如果是首页，则有两个按钮不能点击
        if (isFirstPage) {
            $firstPageLi.addClass("disabled");//第一页li添加disabled的class
            $firstPageLi.find("a").removeAttr("href");//找到第一页li下的a标签并清除属性

            $prePageLi.addClass("disabled");//前一页li添加disabled的class
            $prePageLi.find("a").removeAttr("href");//找到前一页li下的a标签并清除href属性
        } else {
            $firstPageLi.click(function () {
                to_page(1);
            });
            $prePageLi.click(function () {
                to_page(pageNum - 1);
            });
        }

        //如果是尾页，则有两个按钮不能点击
        if (isLastPage) {
            $lastPageLi.addClass("disabled");//最后页li添加disabled的class
            $lastPageLi.find("a").removeAttr("href");//找到最后页li下的a标签并清除属性

            $nextPageLi.addClass("disabled");//后一页li添加disabled的class
            $nextPageLi.find("a").removeAttr("href");//找到后一页li下的a标签并清除href属性
        } else {
            $lastPageLi.click(function () {
                to_page(pages);
            });
            $nextPageLi.click(function () {
                to_page(pageNum + 1);
            });
        }

        //添加"首页"按钮
        $navUl.append($firstPageLi);
        //添加"上一页"按钮
        $navUl.append($prePageLi);
        //遍历添加所有要显示的页码
        $.each(navigatepageNums, function (index, item) {
            let $numLi = $("<li></li>").append(
                $("<a></a>").append(item).attr("href", "#")
            );
            //如果目前的页码真的与遍历页码相等
            if (pageNum == item) {
                $numLi.addClass("active");
                $numLi.empty();//清除里面能点击的a标签
                $numLi.append(
                    $("<span></span>").append(item).append(
                        $("<span></span>").addClass("sr-only")
                    )
                );
            }
            //设置显示的页码格子的点击事件
            $numLi.click(function () {
                to_page(item);
            });

            $navUl.append($numLi);//将每一个要显示的页码加入导航栏中
        });
        //添加"下一页"按钮
        $navUl.append($nextPageLi);
        //添加"尾页"按钮
        $navUl.append($lastPageLi);

        //给该分页条修改magin
        $navUl.css({
            margin : 5
        });
    }


    //该函数用于给控件绑定事件
    function bindOnEvent() {
        sessionStorage.setItem("bindOnEvent_finish","false");
        //弹出增加角色模态框按钮
        $("#show_add_modal").off("click").click(function () {
            $("#add_role_modal").modal({//弹出模态框
                backdrop: "static"
            });
        });

        //增加角色按钮
        $("#add_role_btn").off("click").click(function () {
            let resourceIdList = $('#resource_add_select').val();
            let roleData = $("#add_role_form").serialize() + "&resourceIdList=[" + resourceIdList + "]";
            let rolenameStr = $("#rolename_add_input").val();
            let briefStr = $("#brief_add_input").val();
            let myData = {
                role_name: rolenameStr,
                brief: briefStr,
                resourceIdList: resourceIdList
            };
            let roleJsonData = JSON.stringify(myData);
            console.log("roleData:" + roleData);
            console.log("roleJsonData:" + roleJsonData);
            console.log("rolenameStr:" + rolenameStr + "   briefStr:" + briefStr);

            $.ajax({//请求保存该角色
                url: roleInterface,
                // data: {
                //     role_name: $("#rolename_add_input").value,
                //     brief: $("#brief_add_input").value,
                //     list: resourceIdList
                // },
                // data: roleData,
                data: roleJsonData,
                contentType: 'application/json;charset=utf-8',
                type: "POST",
                beforeSend: function(XMLHttpRequest ) {
                    //在请求头部设置accessToken
                    XMLHttpRequest.setRequestHeader("accessToken", sessionStorage.getItem("accessToken"));
                },
                //请求成功后的回调函数
                //result是请求成功后返回的Json结果
                success: function (result) {
                    if (result.code == 200) {
                        alertUtil.message(result.msg);
                    } else {
                        alertUtil.message(result.msg, "danger");
                    }
                    //关闭模态框
                    $('#add_role_modal').modal('hide');
                    //跳转到尾页
                    to_page(sessionStorage.getItem("totalRecords"));
                },
                error: function () {
                    alertUtil.message("服务器后端未响应!", "danger");
                }
            });
        });

        //确认更新按钮的点击事件
        $("#update_role_btn").off("click").click(function () {
            let roleId = $("#id_update_input").val();
            let rolenameStr = $("#rolename_update_input").val();
            let briefStr = $("#brief_update_input").val();
            let resourceIdList = $('#resource_update_select').val();
            let roleData = {
                id: roleId,
                role_name: rolenameStr,
                brief: briefStr,
                resourceIdList: resourceIdList
            };
            let roleJsonData = JSON.stringify(roleData);
            console.log("roleData:" + roleData);
            console.log("roleJsonData:" + roleJsonData);
            console.log("rolenameStr:" + rolenameStr + "   briefStr:" + briefStr);

            $.ajax({//请求保存该角色
                url: roleInterface,
                data: roleJsonData,
                contentType: 'application/json;charset=utf-8',
                type: "PUT",
                beforeSend: function(XMLHttpRequest ) {
                    //在请求头部设置accessToken
                    XMLHttpRequest.setRequestHeader("accessToken", sessionStorage.getItem("accessToken"));
                },
                //请求成功后的回调函数
                //result是请求成功后返回的Json结果
                success: function (result) {
                    if (result.code == 200) {
                        alertUtil.message(result.msg);
                    } else {
                        alertUtil.message(result.msg, "danger");
                    }
                    //关闭模态框
                    $('#update_role_modal').modal('hide');
                    //跳转到尾页
                    to_page(sessionStorage.getItem("totalRecords"));
                },
                error: function () {
                    alertUtil.message("服务器后端未响应!", "danger");
                }
            });
        });

        //确认删除按钮的点击事件
        $("#delete_role_btn").off("click").click(function () {
            let roleID = $("#delete_id_p").text();//找到要删除的id

            // alertUtil.message("成功删除id为 " + roleID + " 的角色！");
            //id
            $.ajax({//请求删除该角色
                url: roleInterface+"?id=" + roleID,
                type: "DELETE",
                beforeSend: function(XMLHttpRequest ) {
                    //在请求头部设置accessToken
                    XMLHttpRequest.setRequestHeader("accessToken", sessionStorage.getItem("accessToken"));
                },
                //请求成功后的回调函数
                //result是请求成功后返回的Json结果
                success: function (result) {
                    if (result.code == 200) {
                        alertUtil.message(result.msg);
                    } else {
                        alertUtil.message(result.msg, "danger");
                    }
                    $("#delete_role_modal").modal('hide');//关闭删除模态框
                    to_page(sessionStorage.getItem("nowPage"));//跳转到当前页(刷新)
                },
                error: function () {
                    $("#delete_role_modal").modal('hide');//关闭删除模态框
                    alertUtil.message("服务器后端未响应!", "danger");
                }
            });
        });

        //绑定弹出更新模态框的事件
        $(document).off("click", ".update_role_btn").on("click", ".update_role_btn", function () {
            $(".resource_option").removeAttr("disabled");
            let roleID = $(this).parents("tr").find("td:eq(0)").text();
            let roleName = $(this).parents("tr").find("td:eq(1)").text();
            let brief = $(this).parents("tr").find("td:eq(3)").text();
            $("#id_update_input").val(roleID);//需更新的id
            $("#rolename_update_input").val(roleName);//需更新的用户名
            $("#brief_update_input").val(brief);//简介
            //下面为给修改模态框里的列表进行默认勾选
            let resourceIdList = $(this).parents("tr").find("select").val();
            console.log("拥有的权限的id列表为:" + resourceIdList);
            $("#resource_update_select").val(resourceIdList).selectpicker('refresh');//给修改模态框进行默认勾选

            $("#update_role_modal").modal({//弹出模态框
                backdrop: "static"
            });
        });

        //绑定弹出删除模态框的事件
        $(document).off("click", ".delete_role_btn").on("click", ".delete_role_btn", function () {
            // alertUtil.message("确认删除某个角色吗？","warning");
            let roleID = $(this).parents("tr").find("td:eq(0)").text();
            let roleName = $(this).parents("tr").find("td:eq(1)").text();
            $("#delete_id_p").empty();//添加id前先清空
            $("#delete_id_p").text(roleID);//添加删除的id
            $("#delete_tip_p").empty();//添加提示前先清空
            $("#delete_tip_p").append("确认删除角色<strong>[" + roleName + "]</strong>吗？<strong>注意，此操作不可逆！</strong>");//添加删除的提示
            //alertUtil.message("确认删除id为" + roleID + "的角色吗？", "warning");

            $("#delete_role_modal").modal({//弹出模态框
                backdrop: "static"
            });
        });
        sessionStorage.setItem("bindOnEvent_finish","true");
    }
</script>

